<template>
  <div class="m-4">
    <el-form size="small" label-width="80px">
      <el-form-item label="登录状态">
        <el-text type="primary">
          <span>已登录</span>
        </el-text>
        <el-divider direction="vertical" />
        <el-button type="danger" @click="handleLogout()">退出账号</el-button>
      </el-form-item>
      <el-form-item label="用户ID">
        <!-- <el-input readonly disabled :value="userStore.data.number"></el-input> -->
        <el-text type="info">{{ userStore.data.number }}</el-text>
      </el-form-item>
      <el-form-item label="用户名">
        <!-- <el-input readonly disabled :value="userStore.data.clientName"></el-input> -->
        <el-text type="info">{{ userStore.data.clientName }}</el-text>
      </el-form-item>
      <el-form-item label="姓名">
        <!-- <el-input readonly disabled :value="userStore.data.name"></el-input> -->
        <el-text type="info">{{ userStore.data.name }}</el-text>
      </el-form-item>
      <el-form-item label="密码">
        <div class="flex w-full">
          <!-- <el-text type="info" v-if="!isEditPasswd">{{ userStore.data.passwd }}</el-text> -->
          <el-input
            v-model="userStore.data.passwd"
            :readonly="!isEditPasswd"
            :disabled="!isEditPasswd"
          ></el-input>
          <span>&nbsp;</span>
          <transition name="el-fade-in-linear" mode="out-in">
            <el-button v-if="isEditPasswd" type="warning" @click="isEditPasswd = false"
              >取消</el-button
            >
            <el-button v-else type="primary" @click="isEditPasswd = true">修改</el-button>
          </transition>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/stores/user.js'
const router = useRouter()
const userStore = useUserStore()
const isEditPasswd = ref(false)

const handleLogout = () => {
  userStore.logout()
  router.back()
}
</script>
